<template>
  <div class='m-lesson_classes'>
    <div style='padding-bottom: 20px;'>
      <el-button type='primary' @click='add'>添加时间</el-button>
    </div>
    <a-table :data='data' :cols='tableKeys'>
      <el-table-column align="center" label="操作" width='180' slot='ahead'>
        <template slot-scope="scope">
          <div>
            <el-button size='mini' @click='choose(scope.row.id)'>选择</el-button>
            <el-button size='mini' @click='trigger(scope.row)'>{{ scope.row.status === '1' ? '禁用' : '启用'}}</el-button>
            <el-button size='mini' @click='deleteObj(scope.row.id)'>删除</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="上课时间" min-width='130'>
        <template slot-scope="scope">
          <div>{{ `${scope.row.begin_hour}:${scope.row.begin_minute} - ${scope.row.end_hour}:${scope.row.end_minute}` }}</div>
        </template>
      </el-table-column>
    </a-table>
    <div class='u-pagination'>
      <!-- 分页 -->
      <pagination ref='page' @change='getData' :action='fetchData' :pageSize='20'></pagination>
    </div>

    <el-dialog
      v-loading='ifRequesting'
      :title="isAdd ? '添加科室' : '修改科室'"
      :visible.sync="dialogVisible"
      :before-close="() => {dialogVisible = false}">
      <el-form class="form" ref='form' label-width="120px" :model="form" :rules='rules'>
        <el-form-item label="上课时间：" prop='time'>
          <el-time-picker
            is-range
            arrow-control
            v-model="form.time"
            format='HH:mm'
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="排序：" prop='order'>
          <el-input type="number" placeholder="请输入排序号" v-model.trim="form.order"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop='memo'>
          <el-input type="text" placeholder="请重新输入备注" v-model.trim="form.memo"></el-input>
        </el-form-item>
        <el-form-item align='right'>
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const status = {
  1: '启用中',
  0: '禁用中'
}
export default {
  name: 'm-lesson_classes',

  data() {
    const statusFilter = (value) => {
      return status[value]
    }
    return {
      tableKeys: [
        { prop: 'status', label: '状态', width: '140', filter: statusFilter },
        { prop: 'order', label: '排序', minWidth: '130' },
        { prop: 'memo', label: '备注', minWidth: '130' }
      ],
      data: [],
      ifRequesting: false,
      selectId: '',
      defaultTime: [],
      form: {
        time: [new Date().getTime(), new Date().getTime()],
        order: '',
        memo: ''
      },
      rules: {
        time: [
          { required: true, message: '请选择时间', trigger: 'blur' }
        ],
        order: [
          { required: true, message: '请输入排序', trigger: 'blur' }
        ],
        memo: [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { min: 2, message: '长度至少 2 个字符', trigger: 'blur' }
        ]
      },
      isAdd: true,
      dialogVisible: false
    }
  },

  mounted() {
    this.$refs.page.changePage()
  },

  methods: {
    async fetchData(aPageNum, aPageSize) {
      return this.$api.courseGetClassTimes({
        aMerchantId: this.aFirmId,
        aPageNum,
        aPageSize
      })
    },

    getData(data) {
      this.data = data
    },

    add() {
      this.reset()
      this.isAdd = true
      this.dialogVisible = true
    },

    formatTime(data) {
      const date = new Date(data)
      return {
        mintue: date.getMinutes(),
        hour: date.getHours()
      }
    },

    confirm() {
      if (this.ifRequesting) return
      this.$refs.form.validate(async (valid) => {
        if (!valid) return
        const { time, order, memo } = this.form
        if (time.length !== 2) {
          return this.__notify('警告', '请选择好时间', 'info')
        }
        const begin = this.formatTime(time[0])
        const end = this.formatTime(time[1])
        this.ifRequesting = true
        const { code } = await this.$api[this.isAdd ? 'courseCreateClassTimes' : 'courseModifyClassTimes']({
          aMerchantId: this.aFirmId,
          aBeginHour: begin.hour,
          aBeginMinute: begin.mintue,
          aEndHour: end.hour,
          aEndMinute: end.mintue,
          aOrder: order,
          aMemo: memo,
          aId: this.selectId || ''
        })
        this.ifRequesting = false
        if (code === 0) {
          this.dialogVisible = false
          this.$refs.page.changePage()
          this.reset()
          this.selectId = ''
          this.isAdd = true
        }
      })
    },

    cancel() {
      this.dialogVisible = false
    },

    setTime(hour, mintues) {
      const date = new Date()
      date.setMinutes(mintues)
      date.setHours(hour)
      return date.getTime()
    },

    async getDetail(id) {
      this.ifRequesting = true
      const { code, data } = await this.$api.courseGetClassTimesInfo({
        aId: id
      })
      this.ifRequesting = false
      if (code === 0) {
        this.form.order = data.order
        this.form.memo = data.memo
        this.form.time = [this.setTime(data.begin_hour, data.begin_minute), this.setTime(data.end_hour, data.end_minute)]
      }
    },

    choose(id) {
      this.isAdd = false
      this.selectId = id
      this.dialogVisible = true
      this.reset()
      this.getDetail(id)
    },

    deleteObj(id) {
      if (this.ifRequesting) return false
      this.__messageBox({
        title: '你确认要删除该时间吗？',
        successCallback: async () => {
          this.ifRequesting = true
          const { code } = await this.$api.courseDeleteClassTimes({ aId: id })
          this.ifRequesting = false
          this.$refs.page.changePage()
          return code
        }
      })
    },

    async trigger({ id, status }) {
      this.ifRequesting = true
      const { code } = await this.$api.courseSetClassTimes({
        aId: id,
        aStartStop: status === '1' ? '1' : '2'
      })
      this.ifRequesting = false
      if (code === 0) {
        this.$refs.page.changePage()
      }
    },

    reset() {
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    }
  }
}
</script>

<style lang='less'>

</style>